<template>
  <div class="adminHandle" >

    <div class="selectBox">
      <h2>选课系统</h2>
    <template>
      <el-table
        :data="tableDataAll"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="课程地址">
                <span>{{ props.row.clazzRoomAddr }}</span>
              </el-form-item>
              <el-form-item label="课程教材">
                <span>{{ props.row.book }}</span>
              </el-form-item>
              <el-form-item label="课程名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="课程学分">
                <span>{{ props.row.credit }}</span>
              </el-form-item>
              <el-form-item label="课程时间">
                <span>{{ classAt(props.row.section) }}</span>
              </el-form-item>
              <el-form-item label="课程教师">
                <span>{{ props.row.teacherName }}</span>
              </el-form-item>
              <el-form-item label="课程教师职称">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="课程日期">
                <span>星期{{ props.row.week }}</span>
              </el-form-item>
              <el-form-item label="课程周长">
                <span>{{ props.row.weeksOfTerm }}周</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="课程名字"
          prop="name">
        </el-table-column>
        <el-table-column
          label="课程日期"
          prop="week">
          <template slot-scope="scope">
            <span>星期{{scope.row.week}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程时间"
          prop="section">
          <template slot-scope="scope">
            <span>{{ classAt(scope.row.section) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选课操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="selectClass(scope.row)" :disabled="isSelected(scope.row)">选课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    </div>

    <div class="choseCourse">
      <h3>已选课程</h3>
    <template>
      <el-table
        :data="tableDataCourse"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="课程地址">
                <span>{{ props.row.clazzRoomAddr }}</span>
              </el-form-item>
              <el-form-item label="课程教材">
                <span>{{ props.row.book }}</span>
              </el-form-item>
              <el-form-item label="学分">
                <span>{{ props.row.credit }}</span>
              </el-form-item>
              <el-form-item label="课程名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="课程时间">
                <span>{{ classAt(props.row.section) }}</span>
              </el-form-item>
              <el-form-item label="课程教师">
                <span>{{ props.row.teacherName }}</span>
              </el-form-item>
              <el-form-item label="课程教师职称">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="课程日期">
                <span>星期{{ props.row.week }}</span>
              </el-form-item>
              <el-form-item label="课程周长">
                <span>{{ props.row.weeksOfTerm }}周</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="课程名字"
          prop="name">
        </el-table-column>
        <el-table-column
          label="课程日期"
          prop="week">
          <template slot-scope="scope">
            <span>星期{{scope.row.week}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程时间"
          prop="section">
          <template slot-scope="scope">
            <span>{{ classAt(scope.row.section) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="退课操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="deleteClass(scope.$index,scope.row)">退课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "StudentCourseSelect",
  data(){
    return{
      tableDataAll:[],
      tableDataCourse:[],
      courseSelected:{},
      sendMsg:{
        studentNumber:"",
        cid:0,
      },
    }
  },
  computed:{
    classAt: function(){
      return function(num){
        if(num === "1"){return "第一二节"}
        else if(num === "2"){return "第三四节"}
        else if(num === "3"){return "第五六节"}
        else{return "第七八节"}}

    },
  },
  methods:{
    selectClass(row){
      console.log("selected!!!")
      this.sendMsg.cid = row.id
      this.ip = localStorage.getItem('ip')
      this.token = sessionStorage.getItem('token')

      axios.defaults.headers.common["token"] = this.token;
      axios.post(this.ip + '/stuCourse/',this.sendMsg).then((res)=> {
        console.log(res)
      })
      this.tableDataCourse.push(row)
    },
    deleteClass(index,row){
      console.log("deleted!!!")
      this.sendMsg.cid = row.id
      this.ip = localStorage.getItem('ip')
      this.token = sessionStorage.getItem('token')

      axios.defaults.headers.common["token"] = this.token;
      axios.delete(this.ip + '/stuCourse/' + this.sendMsg.studentNumber + '/' + this.sendMsg.cid).then((res)=>{
        console.log(res)
      })
      this.tableDataCourse.splice(index,1)
    },
    isSelected(row){
      let i= 0
      for(let k=0; k<this.tableDataCourse.length;k++){
        if(this.tableDataCourse[k].id === row.id){i++}
      }
      if(i===0){return false}
      else{return true}
    }
  },
  mounted(){
    this.ip = localStorage.getItem('ip')
    this.token = sessionStorage.getItem('token')

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/course/')).then((response)=>{
      this.tableDataAll = response.data
      console.log(response.data)
    }).catch((error)=>{
      console.log(error)
    })
    axios.get((this.ip + '/STUDENT/msg')).then((response)=>{
      this.sendMsg.studentNumber = response.data.number
    }).catch((error)=>{
      console.log(error)
    })
    axios.get((this.ip + '/stuCourse/table/1')).then((response)=>{
      this.tableDataCourse = response.data
    }).catch((error)=>{
      console.log(error)
    })
  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
.selectBox{
  margin-top: 50px;
}
.choseCourse{
  margin-top: 20px;
}

.el-form--inline .el-form-item {

  display: inline-block;
  margin-right: 50%;
  vertical-align: top;

}
</style>
